<template>
	<view class="index_pages" style="padding: 20rpx;" > 
		
		<view  class="zupus_item flex ali-c"  style="border-bottom: 1rpx solid #BDBDBD;">
			<view style=" width: 100%;height: 55rpx; align-items: center; display: flex;">
				<scroll-view ref="tabbar1"   style=" flex-direction: row;width: 100%;" scroll-x :scroll="false" :show-scrollbar="false" >
					<view style=" display: flex;  justify-content:space-around; align-items: center;">
						<view v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"  :data-id="index" :data-current="index" @click="selectfun(tab)">
							<text class="title"  v-if="nav_active != tab.id" style="font-size: 35rpx; ">{{tab.title}}</text>
							<text class="title"  v-if="nav_active == tab.id" style="font-size: 35rpx; font-weight: bold;">{{tab.title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="zupus_item flex ali-c"  style="display: flex; flex: 1; background-color: #fff;">
			<swiper style="width: 100%; height: 80vh;" :current-item-id="nav_active" circular :disable-touch="true"  >
				<swiper-item   v-for="(item,index) in tabBars" :key="item.id" :item-id="item.id">  
					<scroll-view  scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 80vh;" @scrolltolower="upper">
						<view v-if="list != null"  v-for="(item1,index1) in list" :key="index1"  @tap="jump('/pages/zupu/juanzengh5/juanzengh5?id='+item1.id )"   :style="{backgroundColor:nav_active!='id3'?'#fff8f4':'#f0f0f0'}"  style="padding: 15rpx; border-radius: 15rpx; margin-top: 25rpx;" >
							<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
								<view class="" style="font-size: 25rpx;">
									{{item1.create_time || 0}}
								</view>
							</view>
							<view class="uni-ellipsis-1" style="font-size: 35rpx; ">
								{{item1.title || ''}}
							</view>
							<view class="" style="margin-top: 15rpx;">
								<view class="" style="display: flex; justify-content: space-between; align-items:center;">
									<view class="" style="display: flex;font-size: 30rpx;align-items:center;">
										已筹:<view style="font-size: 45rpx; font-weight: bold;">	{{item1.money_count || ''}}</view>元
									</view>
									<view class="" style="font-size: 30rpx;">
										急需:	{{item1.goal_money || ''}}元
									</view>
								</view>
							</view>
							
							
							
							
							
							<!-- #ifndef MP-WEIXIN -->
							<view class="jdbar" style="margin-top: 55rpx;">
								<view class="jdper" :per="item1.pre" :style="{maxWidth:item1.pre}"></view>
							</view>
							<!-- #endif -->
							
							<!-- #ifdef  MP-WEIXIN -->
							<slider :value="item1.slider"  show-value  :disabled="true"   />
							<!-- #endif -->
							
							
							<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
								
								<view class="" v-if="nav_active == 'type0'">
									<button type="primary" size="mini" :plain="true"  @tap.stop="zhuanfa(item1)" >转发分享</button>
								</view>
								<view class="" v-if="nav_active == 'type0'">
									<button type="warn" size="mini" :plain="true"   @tap.stop="jieshufun(item1)">结束捐赠</button>
								</view>
								<view class="" v-if="nav_active == 'type1'">
									<button type="primary" size="mini" :disabled="true">捐赠成功</button>
								</view>
								<view class="" v-if="nav_active == 'type2'">
									<button type="default" size="mini" :disabled="true">捐赠超时</button>
								</view>	
								<view class="">
									捐赠次数:{{item1.log_count || 0}}次
								</view>
							</view>
						</view>
						<view class="" v-if="list == null"   >
							<view class="" style="font-size: 45rpx; font-weight: bold;display: flex; justify-content: center;">
								暂无数据
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			
			
		</view>
		
		<view  class="zupus_item" >
			<view class="" style="display: flex; justify-content: space-between;align-items:center;" >
				<view @click="jump('/pages/zupu/create_juanzeng/create_juanzeng?id='+id)"  class="" style="width: 100%; height: 80rpx; text-align: center; display: flex; border-radius: 15rpx;  align-items:center;   justify-content:center; background-image: linear-gradient(0deg,#ff6e11,#ff9b11);">
					<view class="" style="font-size: 35rpx; font-weight: bold;color: #fff;">
						创建捐赠
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDonationList,getDonationByInfo,carateDonation , updateDonation} from "@/utils/api/zupu.js" 
	import config from "@/utils/config.js";
	let {
		photo_cdn
	} = config.baseUrl;
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components:{
		},
		props: {
			itemId: {
				type:String,
				default(){
					return;
				}
			},
		},
		data() {
			return {
				photo_cdn,
				nav_active:'type0',
				tabBars:null,
				WinHeight:500,
				
				list: null,
				listdata:null,
				id:null
			}
		},
		computed: {
		},
		onLoad(Option) {
			this.id = Option.id;
			this.getByList()
		},
		onShow() {
		},
		onReady() {

		},
		methods: {
			zhuanfa(e){
				console.log(e)
				uni.navigateTo({
					url: '/pagesim/address-list/group-chat?id='+e.id
				});
			},
			getByList(){
				this.list =  null;
				this.listdata = null;
				getDonationList({
					family_id:this.id
				}).then(res=>{ 
					this.tabBars = res.data.tabBars ;
					this.listdata = res.data.list ;
					if(res.data.list['type0'].length > 0){
						this.list = res.data.list['type0'] ;
					}
					this.nav_active = 'type0'
				})
			},
			//跳转
			jump(e){
				console.log(e)
				uni.navigateTo({
					url:e
				})
			},
			upper: function(e) {
				console.log(e)
			},
			selectfun(e){
				let that = this;
				that.nav_active = e.id;
				that.list = null;
				if(that.listdata[e.id].length > 0){
					that.list = that.listdata[e.id];
				}
			},
			//结束捐赠判断
			jieshufun(e){
				let that  = this;
				uni.showModal({
					title: '提示',
					content: '是否结束该活动',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							e.type = '1';
							updateDonation(e).then(res=>{
								console.log(res)
								if(res.code == 1){
									that.getByList();
								}
							})
						}
					}.bind(this)
				});
			}
		}
	}
</script>

<style lang="scss">
	.jdt {
		margin-left: 100px;
	}
	 
	.jd_title {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	 
	.jdbar {
		background: rgb(227, 227, 227);
		height: 10px;
		width: 100%;
	}
	 
	.jdper {
		height: 10px;
		background: #f30;
		max-width: 100%;
		width: 100%;
		position: relative;
		animation: aniBar 1s;
	}
	 
	.jdper::before {
		position: absolute;
		content: attr(per);
		background: #f30;
		padding: 2px 5px;
		border-radius: 2px;
		font-size: 12px;
		right: -15rpx;
		top: -30px;
		color: #fff;
		transform: translateX(50%); 
	}
	 
	.jdper::after {
		content: "";
		width: 10px;
		height: 10px;
		display: inline-block;
		background: #f30;
		position: absolute;
		right: 0;
		top: -18px;
		z-index: -1;
		border-radius: 2px;
		transform: translateX(50%) rotate(45deg);
	}
	 
	@keyframes aniBar {
		0% {
			width: 0;
		}
	 
		100% {
			width: 100%;
		}
	}
	.uni-ellipsis-1 {
		lines: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.zupus_item{
		// padding: 18rpx 25rpx;
		margin-bottom: 20rpx;
		width: 710rpx;
		// height: 256rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		&.active{
			border: $themecolor 2rpx solid;
		}
		.peag{
			position: absolute;
			top: 0;
			right: 30rpx;
			.people_flag{
				width: 50rpx;
				height: 80rpx;			
			}
			.peag_text{
				font-size: 32rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				color: #FFFFFF;
			}
		}
		.itemimgss{
			width: 146rpx;
			height: 220rpx;
			position: relative;
			.family_name{
				z-index: 2;
				position: absolute;
				top: 16rpx;
				left: 98rpx;
				writing-mode: vertical-lr;
				// font-size: 30rpx;
				height: 144rpx;
				text-align: center;
			}
		}
		.zpimgs{
			width: 146rpx;
			height: 220rpx;
			background-size: 100% 100%;
		}
		.zupus_item_info{		
			margin-left: 36rpx;
	
			.zupu_names{
				color: #000000;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 1;
			}
			.fqr_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.rprs_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.create_time{
				margin-top: 40rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.editzp{
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
				position: absolute;
				right: 100rpx;
				top: 30rpx;
			}
			.contactccr{
				color: #FFFFFF;
				background-color: $themecolor;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 14rpx;
			}
			
			
			.item_info_foot{
				margin-top: 16rpx;
				.tximgs{
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}
				.inheritors{
					margin-left: 20rpx;
					color: #AE8949;
					font-size: 24rpx;
					.tt_line{
						text-decoration: underline;
					}
				}
				.punumtext{
					margin-left: auto;
					color: #999999;
					font-size: 24rpx;
				}
			}
			
		}
	}
	@import "./juanzeng.scss";
</style>